<template>
	<view class="main-content">
		<u-dropdown class="u-dropdown" ref="uDropdown" :border-bottom="true">
			<u-dropdown-item :title="dateForm.year+'年'">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="max-height:500rpx;">
						<view v-for="(item,index) in yearList" hover-class="active" class="item-list u-content-color" @click="select(index,'yearList')">{{item}}</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="dateForm.month+'月'">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="max-height:500rpx;">
						<view v-for="(item,index) in monthList" hover-class="active" class="item-list u-content-color" @click="select(index,'monthList')">{{item}}</view>
					</scroll-view>
				</view>
			</u-dropdown-item>
			<!-- <u-dropdown-item :title="dateForm.day+'日'">
				<view class="slot-content" style="background-color: #FFFFFF;">
					<scroll-view scroll-y="true" style="max-height:500rpx;">
						<view v-for="(item,index) in dayList" hover-class="active" class="item-list u-content-color" @click="select(index,'dayList')">{{item}}</view>
					</scroll-view>
				</view>
			</u-dropdown-item> -->
		</u-dropdown>
		<!-- 打卡记录 -->
		<view v-if="clockInRecords.length" style="width: 100%;">
			<view v-for="(item,index) in clockInRecords" :key="index" class="records">
				打卡时间：{{item.createTime}}
			</view>
		</view>
		<view class="empty" v-else>
			<u-empty mode="data"></u-empty>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import { findUserClockRecord } from '../../../utils/index.js'
	export default {
		data() {
			return {
				user: uni.getStorageSync('user'),
				yearList: [],						//年
				monthList: [],						//月
				dayList: [],						//天
				dateForm: {							//已选择日期
					year: '',
					month: '',
					day: ''
				},
				clockInRecords: []					//打卡记录
			}
		},
		methods: {
			// 获取工段长是否打卡
			async getcolckIn() {
				let date = this.dateForm.year + '-' + this.dateForm.month
				if(this.dateForm.day){
					date = date + '-' + this.dateForm.day
				}
				// date格式：2022
							// 2022-09
							// 2022-09-09
				const { data } = await findUserClockRecord({jobNumber: this.user.jobNumber,date})
				console.log(data)
				let errMsg = data.msg
				if(data.code == '1') {
					this.clockInRecords = data.data
				} else {
					this.$refs.uTips.show({
						title: errMsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			// 选择日期
			select(index,type){
				if(type == 'yearList') {
					this.dateForm.year = this.yearList[index]
				} else if(type == 'monthList') {
					this.dateForm.month = this.monthList[index]
				} else if(type == 'dayList') {
					this.dateForm.day = this.dayList[index]
				}
				this.getcolckIn()
				this.closeDropdown()
			},
			// 初始化日期
			initDate(){
				var date = new Date()
				this.dateForm.year = date.getFullYear()
				this.dateForm.month = this.dateDeal(date.getMonth() + 1)
				this.getcolckIn()
				this.getYears(date.getFullYear())
				this.getMonth()
				this.getDays()
			},
			getYears(endYear){
				for(let i = 2022;i <= endYear;i++){
					this.yearList.push(i)
				}
			},
			getMonth(){
				for(let i = 1;i <= 12;i++){
					this.monthList.push(this.dateDeal(i))
				}
			},
			getDays(){
				console.log(this.getDaysInMonth(this.dateForm.year,this.dateForm.month))
				for(let i = 1;i <= this.getDaysInMonth(this.dateForm.year,this.dateForm.month);i++){
					this.dayList.push(this.dateDeal(i))
				}
			},
			dateDeal(val){
				if(val < 10){
					return '0' + val
				} else {
					return val
				}
			},
			getDaysInMonth(year,month){
			    let temp = new Date(year,month,0);
			    return temp.getDate();
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
			}
		},
		// 进入页面初始化日期并获取打卡记录
		onLoad: function (options)  {
			this.initDate()
		}
	}
</script>

<style  lang="scss" scoped>
	.main-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.u-dropdown{
		width: 100%;
	}
	.item-list{
		line-height: 90rpx;
		padding-left: 60rpx;
		border-top: 1rpx solid #F5F5F5;
	}
	.active{
		background-color: #F5F5F5;
	}
	.empty{
		width: 100%;
		height: 500rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.records{
		line-height: 90rpx;
		padding-left: 30rpx;
	}
</style>
